<template>
    <el-drawer v-model="drawer" :with-header="false" @close="close" :append-to-body="true" :size="size" ref="drawerRef"
        class="customer-detail-drawer" :modal="true" modal-class="customer-modal">

        <div class="app-container" style="margin-top: 20px; margin-left: 20px;">
            <el-date-picker v-model="dateList" type="daterange" range-separator="至"
                        start-placeholder="请选择时间" end-placeholder="请选择时间"  clearable
                        size="small" value-format="YYYY-MM-DD" @change="selectDate"/>
            <el-button style="margin-left: 20px;" size="small" @click="reset()">重置</el-button>
            <div>
                <div style="margin-top: 20px;">
                    <el-table :data="tableData" style="width: 100%" size="default">
                        <el-table-column label="用户名称" prop="nickname"></el-table-column>
                        <el-table-column label="试卷名称" prop="name"></el-table-column>
                        <el-table-column label="店铺来源" prop="shopName"></el-table-column>
                        <el-table-column label="试卷总分" prop="score"></el-table-column>
                        <el-table-column label="得分" prop="resultScore"></el-table-column>
                        <el-table-column label="等级" prop="grade"></el-table-column>
                        <el-table-column label="点评" prop="comment"></el-table-column>
                        <el-table-column label="创建时间" prop="createTime"></el-table-column>
                    </el-table>
                </div>
            </div>

        </div>

        <div class="page-block">
            <el-pagination v-model:currentPage="search.current" v-model:page-size="search.size" :page-sizes="[10, 20, 30, 40]"
                :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                :total="total" :hide-on-single-page="true" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </el-drawer>
</template>

<script>
import {
    toRefs,
    computed,
    reactive,
    watch,
    onMounted,
    ref,
    nextTick
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import QuestionDetail from './QuestionDetail.vue'
import api from '/@/api/commonApi'
export default {
    name: 'PaperRelationQuestionDetail',
    components: {
        QuestionDetail
    },
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    setup(props, context) {
        const { defaultForm } = toRefs(props)
        const searchHistoryForm = ref()
        const state = reactive({
            form: {},
            showCard: false,
            questionList: [],
            activeName: 'first',
            tableData: [],
            data: [],
            dateList: [],
            leftValue: [],
            dialogFormVisible: false,
            treeData: [],
            title: '',
            total: 0,
            search: {
                current: 1,
                size: 10,
                paperId: '',
                startDate: '',
                endDate: ''
            },
            questionform: {},
            typeOptions: [{
                value: '1',
                label: '单选',
            },
            {
                value: '2',
                label: '填空',
            },
            {
                value: '3',
                label: '简答题',
            }, {
                value: '4',
                label: '判断',
            }, {
                value: '5',
                label: '多选',
            }],
        })

        const {
            dialogDrawer
        } = toRefs(props)
        let drawer = computed({
            get: () => dialogDrawer.value,
            set: (val) => {
                context.emit('update:dialogDrawer', val)
            }
        })
        watch(() => dialogDrawer.value, val => {
            context.emit("update:dialogDrawer", val)
            if (val) {
                nextTick(() => {
                    getList()
                    if (document.querySelector('.el-drawer__body')) {
                        document.querySelector('.el-drawer__body').onscroll = e => {
                            state.scrollTop = e.target.scrollTop
                        }
                    }
                    if (document.querySelector('.refLine')) {
                        state.refLineTop = document.querySelector('.refLine').offsetTop
                    }
                })
            }
        })
        const getSize = () => {
            if (document.body.clientWidth <= 1400) {
                return '1220px'
            } else {
                return '85%'
            }
        }

        state.size = getSize()
        const close = () => {
            context.emit("update:dialogDrawer", false)
        }

        const getList = () => {
            state.search.paperId = defaultForm.value.id
            api.answerLog(state.search).then(res => {
                state.tableData = res.data.records
                state.total = res.data.total
            })
        }
        const handleSizeChange = e => {
            state.search.size = e
            getList()
        }
        const handleCurrentChange = e => {
            state.search.current = e
            getList()
        }
        const reset = (formEl) => {
            state.search = {
                current: 1,
                size: 10,
                paperId: defaultForm.value.id,
                startDate: '',
                endDate: ''
            }
            state.dateList = []
            getList()
        }
        const getQuestionType = (item) => {
            let result = '单选题'
            switch (item.type) {
                case 2: {
                    result = '填空题'
                    break
                }
                case 4: {
                    result = '判断题'
                    break
                }
                case 5: {
                    result = '多选题'
                }
            }
            return result
        }

        const handleChange = () => {
        }

        const selectDate = (val) => {
            console.log(val);
            if (val != null) {
                state.search.startDate = val[0]
                state.search.endDate = val[1]
                getList()
            }
        }

        onMounted(() => {

        })
        return {
            drawer,
            ...toRefs(state),
            close,
            searchHistoryForm,
            getList,
            handleSizeChange,
            handleCurrentChange,
            reset,
            selectDate,
            getQuestionType,
            handleChange
        }
    }
}
</script>

<style lang="scss">
.customer-detail-drawer {
    overflow: unset;
    position: fixed;
}

.customer-modal {
    //left: unset;
}

.action-popper {
    background: transparent !important;
    position: relative;

    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--el-color-primary-light-9);
        opacity: .8;
        filter: grayscale(100%);
    }

    .el-popper__arrow::before {
        background: var(--el-color-primary-light-9) !important;
        opacity: .8;
        filter: grayscale(100%);
    }

    .sale-title {
        color: var(--el-text-color-primary);
    }
}

.tabs-list {
    position: absolute;
    top: 90px;
    left: -50px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: auto;
    max-height: 100%;

    // .tabs-cell{
    //     background: var(--next-color-white);
    //     margin-bottom: 3px;
    //     min-width: 60px;
    //     text-align: right;
    //     padding: 0 5px;
    //     cursor: pointer;
    //     font-size: 12px;
    //     border-radius: 5px 0 0 5px;
    //     box-shadow: rgba(0, 0, 0, 0.15) -1.95px -1.95px 2.6px;
    //     color: var(--el-text-color-secondary);
    //     transition: .1s;
    //     min-height: 35px;
    //     display: flex;
    //     flex-direction: column;
    //     align-items: center;
    //     justify-content: center;
    //     filter: brightness(.85);
    // }
    // .tabs-cell:hover,
    // .active{
    //     background: var(--el-color-primary-dark-2);
    //     color: var(--el-color-primary-light-9);
    //     padding: 5px 8px;
    //     min-width: 70px;
    //     font-size: 14px;
    //     font-weight: bold;
    //     filter: brightness(1)
    // }
    .close-btn {
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: var(--el-color-primary);
        padding: 5px 0;
        border-radius: 5px 0 0 5px;
    }
}

.company-title {
    text-align: center;
    font-size: 18px;
    color: var(--next-bg-menuBar-light-1);
    margin-bottom: 50px;
}

.app-container {
    // margin-top: 3px;
    background: #f9f9f9;
    min-height: calc(100vh - 95px);

    .question_header {
        background: #fff;
        padding: 20px;
        margin: 0 auto 10px;
        max-width: 1200px;
        border-radius: 16px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .answer_page {
        display: flex;
        align-items: flex-start;
        max-width: 1200px;
        margin: 0 auto;

        .title_box {
            //display: flex;
            align-items: flex-start;

            .answer_num {
                //width: 40px;
                font-weight: bold;
                font-size: 16px;
            }

            .answer_question {
                //flex: 1;
                overflow: hidden;
            }
        }

        .answer_card {
            flex: 1;
            overflow: hidden;
            margin-right: 10px;

            .answer_content_box {
                margin: 20px 0 20px 40px;
                border-bottom: 1px solid #eee;
            }
        }

        .question_card {
            width: 280px;
            position: sticky;
            top: 130px;

            .question_num_content {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .question_num {
                    width: 35px;
                    height: 35px;
                    margin: 0 15px 12px 0;
                    border-radius: 8px;
                    border: 1px solid #eee;
                    cursor: pointer;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .question_num:hover {
                    background: #409EFF;
                    color: #fff;
                    border-color: #409EFF;
                }

                .question_num:nth-child(5n+5) {
                    margin-right: 0;
                }

                .success {
                    background: rgba(#67C23A, .1);
                    border-color: #67C23A;
                    color: #67C23A;
                }

                .error {
                    background: rgba(#F56C6C, .1);
                    border-color: #F56C6C;
                    color: #F56C6C;
                }
            }
        }

        .fixed_answer_icon {
            display: none;
        }

        @media screen and(max-width: 750px) {
            .answer_card {
                margin-right: 0;
            }

            .question_card {
                position: fixed;
                z-index: 99;
                top: unset;
                bottom: -100vh;
                width: 90%;

                .question_num_content {
                    .question_num {
                        margin-right: 12px;
                    }

                    .question_num:nth-child(5n+5) {
                        margin-right: 12px;
                    }
                }
            }

            .question_fixed_active {
                top: unset;
                bottom: 0;
                transition: .2s;
            }

            .fixed_answer_icon {
                display: block;
                position: fixed;
                width: 48px;
                height: 48px;
                background: #409EFF;
                z-index: 99;
                top: 40%;
                right: 0;
                border-radius: 8px 0 0 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                i {
                    font-size: 24px;
                    color: #fff;
                }
            }
        }
    }
}

:deep(.el-image__error) {
    font-size: 12px;
}

.choice-row {
    margin: 3px 0;
    padding: 9px 15px;
    background: rgb(247, 248, 249);
}

.green-row {
    background-color: rgba(103, 194, 58, 0.5);
}

.red-row {
    background-color: rgba(245, 108, 108, 0.5);
}

// 答题卡小圆点
.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.title_label {
    height: 40px;
    line-height: 40px;
}

.htmlPage {
    :deep(img) {
        width: 100% !important;
        height: 200px !important;
        object-fit: contain;
    }
}
</style>
